<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.js" type="text/javascript"></script>
    <script src="/static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="/static/js/permission.js" type="text/javascript"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/static/css/style.min.css" rel="stylesheet">
    <style type="text/css">
        body{margin:10px;width: 100%;}ul{margin-top:5px;}li{margin-top:3px;}.layui-form-switch{margin-top: 0;}#tree1 ul+ul{border-top: 1px dashed #e2e2e2;}
        .layui-form-pane .layui-form-label{
            width:175px;!important;
        }
        .layui-form-pane .layui-input-block{
            margin-left: 175px;!important;
            min-height: 36px;!important;
        }
    </style>
</head>
<body>
<button type="button" class="layui-btn  layui-btn-sm add-dir">新增目录</button>
<button type="button" class="layui-btn  layui-btn-normal layui-btn-sm open-all">全部展开</button>
<button type="button" class="layui-btn  layui-btn-sm close-all">全部关闭</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm change-icon">随机更换小图标</button>

<table class="layui-table layui-form" id="tree-table"></table>

<!--新增目录弹窗界面-->
<div id="addDirDiv" style="display: none;">
    <form class="layui-form layui-form-pane" action="">
        <br/>
        <div class="layui-form-item">
            <label class="layui-form-label">目录名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标代码</label>
            <div class="layui-input-inline">
                <input type="text" id="dirIcon" name="icon" lay-verify="required" placeholder="例如：mdi mdi-palette" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-inline">
                <input type="text"  name="url" value="#" lay-verify="required" placeholder="#" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">根目录</label>
            <div class="layui-input-inline">
                <input type="text"  name="pid" value="1" lay-verify="required" placeholder="系统管理" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-inline">
                <button id="dir_sub_btn" class="layui-btn" lay-submit="" lay-filter="dir_sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--目录下菜单的新增界面-->
<div id="addDirMenuDiv" style="display: none;">
    <form class="layui-form layui-form-pane" action="">
        <br/>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标代码</label>
            <div class="layui-input-inline">
                <input type="text" id="menuIcon" name="icon" lay-verify="required" placeholder="例如：mdi mdi-palette" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-inline">
                <input type="text"  name="url"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父级目录</label>
            <div class="layui-input-inline">
                <input type="text" id="menu_pid" name="pid" lay-verify="required" autocomplete="off" class="layui-input layui-hide">
                <input type="text" id="menu_name" name="pName" lay-verify="required" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-inline">
                <button id="dir_menu_sub" class="layui-btn" lay-submit="" lay-filter="dir_menu_sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--目录的编辑与菜单的编辑界面-->
<div id="editDiv" style="display: none;">
    <form class="layui-form layui-form-pane" action="">
        <br/>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="id" id="edit_ID" class="layui-hide">
                <input type="text" id="edit_name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标代码</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_icon" name="icon" lay-verify="required" placeholder="例如：mdi mdi-palette" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_url" name="url"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父级目录</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_pid" name="pid" lay-verify="required" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-inline">
                <button id="dir_menu_edit_sub" class="layui-btn" lay-submit="" lay-filter="dir_menu_edit_sub">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>